<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
		      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		    <![endif]-->
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<title>阿里百秀案例</title>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<header class="col-md-2">
					<div class="logo">
						<a href="#">
							<img class="hidden-xs" src="https://w.wallhaven.cc/full/72/wallhaven-72jwp3.jpg">
						<span class="visible-xs">阿里百秀</span>
						</a>
					</div>
					<div class="nav">
						<ul>
							<li><a href="#" class="glyphicon glyphicon-calendar">生活馆</a></li>
							<li><a href="#" class="glyphicon glyphicon-globe">自然汇</a></li>
							<li><a href="#" class="glyphicon glyphicon-sunglasses">科技潮</a></li>
							<li><a href="#" class="glyphicon glyphicon-plane">奇趣事</a></li>
							<li><a href="#" class="glyphicon glyphicon-apple">美食街</a></li>
						</ul>
					</div>
				</header>
				<article class="col-md-7">
					<!-- 新闻 -->
					<div class="news clearfix">
						<ul>
							<li>
								<a href="#">
									<img src="https://w.wallhaven.cc/full/y8/wallhaven-y8vlyk.jpg">
									<p>粉红剑女</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://w.wallhaven.cc/full/9m/wallhaven-9mgevd.jpg">
									<p>红头发少女，看我的眼睛会发光</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://w.wallhaven.cc/full/o3/wallhaven-o3jwl5.jpg">
									<p>红红大峡谷，深不见底的大峡谷</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://w.wallhaven.cc/full/k7/wallhaven-k7dv31.jpg">
									<p>红色枫叶</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://w.wallhaven.cc/full/1k/wallhaven-1k2gjg.jpg">
									<p>雾气森林，来捉迷藏把</p>
								</a>
							</li>
						</ul>
					</div>
					<!-- 发表 -->
					<div class="publish">
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆，关于家具的一百种摆放位置。。。</h3>
								<p class="text-muted">alibaixiu 发布于2021-11-5</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium doloremque porro explicabo ipsa recusandae repellendus iusto in voluptatum rerum nihil ab quae sed veniam ratione possimus laudantium delectus odio consectetur.
							</p>
							<p class="text-muted">阅读(247),评论(10),点赞(6780)</p>
							</div>
							<div class="col-sm-3 pic hidden-xs" >
								<img src="https://w.wallhaven.cc/full/q2/wallhaven-q2o5mq.jpg" >
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆，关于家具的一百种摆放位置。。。</h3>
								<p class="text-muted">alibaixiu 发布于2021-11-5</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium doloremque porro explicabo ipsa recusandae repellendus iusto in voluptatum rerum nihil ab quae sed veniam ratione possimus laudantium delectus odio consectetur.
							</p>
							<p class="text-muted">阅读(247),评论(10),点赞(6780)</p>
							</div>
							<div class="col-sm-3 pic hidden-xs" >
								<img src="https://w.wallhaven.cc/full/q2/wallhaven-q2o5mq.jpg" >
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆，关于家具的一百种摆放位置。。。</h3>
								<p class="text-muted">alibaixiu 发布于2021-11-5</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium doloremque porro explicabo ipsa recusandae repellendus iusto in voluptatum rerum nihil ab quae sed veniam ratione possimus laudantium delectus odio consectetur.
							</p>
							<p class="text-muted">阅读(247),评论(10),点赞(6780)</p>
							</div>
							<div class="col-sm-3 pic hidden-xs" >
								<img src="https://w.wallhaven.cc/full/q2/wallhaven-q2o5mq.jpg" >
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆，关于家具的一百种摆放位置。。。</h3>
								<p class="text-muted">alibaixiu 发布于2021-11-5</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium doloremque porro explicabo ipsa recusandae repellendus iusto in voluptatum rerum nihil ab quae sed veniam ratione possimus laudantium delectus odio consectetur.
							</p>
							<p class="text-muted">阅读(247),评论(10),点赞(6780)</p>
							</div>
							<div class="col-sm-3 pic hidden-xs" >
								<img src="https://w.wallhaven.cc/full/q2/wallhaven-q2o5mq.jpg" >
							</div>
						</div>
						<div class="row">
							<div class="col-sm-9">
								<h3>生活馆，关于家具的一百种摆放位置。。。</h3>
								<p class="text-muted">alibaixiu 发布于2021-11-5</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium doloremque porro explicabo ipsa recusandae repellendus iusto in voluptatum rerum nihil ab quae sed veniam ratione possimus laudantium delectus odio consectetur.
							</p>
							<p class="text-muted">阅读(247),评论(10),点赞(6780)</p>
							</div>
							<div class="col-sm-3 pic hidden-xs" >
								<img src="https://w.wallhaven.cc/full/q2/wallhaven-q2o5mq.jpg" >
							</div>
						</div>
					</div>
				</article>
				<aside class="col-md-3">
					<a href="#" class="banner">
						<img src="https://w.wallhaven.cc/full/3z/wallhaven-3z27ld.jpg" >
					</a>
					<a href="#" class="hot">
						<span class="btn btn-primary">热搜</span>
						<h4 class="text-primary">欢迎来到神奇的网站</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nostrum iste asperiores incidunt rem quaerat.</p>
					</a>
				</aside>
			</div>
		</div>

	</body>
</html>
